<!DOCTYPE html>
<html lang="ch">
<head>
    <meta charset="UTF-8"/>
    <meta
            name="viewport"
            content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"
    />
    <meta http-equiv="X-UA-Compatible" content="ie=edge"/>

    <!--    引入vue-->
    <script src="js/vue.min.js"></script>
    <!-- 引入样式 -->
    <link
            rel="stylesheet"
            href="https://unpkg.com/element-ui/lib/theme-chalk/index.css"
    />
    <!-- 引入组件库 -->
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
    <!--    引入axios-->
    <script src="js/axios.min.js"></script>
    <!--    表格颜色颜色样式-->
    <style>
        .el-table .warning-row {
            background: oldlace;
        }

        .el-table .success-row {
            background: #f0f9eb;
        }
    </style>
    <title>form</title>
</head>
<body>
<div id="app">
    <el-page-header @back="goBack" content="教师课程管理系统">
    </el-page-header>
    <el-divider content-position="right">老师你好</el-divider>

    <el-row>
        <el-col :span="8">
            <!--        搜索表单-->
            <el-form
                    :inline="true"
                    :model="team"
                    class="demo-form-inline"
                    size="small"
            >
                <el-form-item label="校区">
                    <el-select v-model="team.teamArea" placeholder="选题">
                        <el-option label="五山" value="五山"></el-option>
                        <el-option label="国际" value="国际"></el-option>
                        <el-option label="大学城" value="大学城"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="姓名">
                    <el-input v-model="team.stu1Name" placeholder="姓名"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="onSubmit">查询</el-button>
                </el-form-item>

                <el-form-item>
                    <el-button type="primary" @click="test">测试</el-button>
                </el-form-item>
            </el-form>
        </el-col>
        <el-col :span="8">
            <el-button
                    type="primary"
                    plain="ture"
                    @click="dialogVisible = true"
                    size="small"
            >布置作业
            </el-button
            >
        </el-col>

    </el-row>

    <!--        新增数据的对话框表单-->
    <el-dialog title="布置作业" :visible.sync="dialogVisible" width="30%">
        <el-form ref="form" :model="homework" label-width="80px">
            <el-form-item label="作业名字">
                <el-input v-model="homework.name"></el-input>
            </el-form-item>

            <el-form-item label="作业题目或者要求">
            </el-form-item>

            <el-form-item>
                <el-button type="primary" @click="addHomework">新增</el-button>
                <el-button @click="dialogVisible = false">取消</el-button>
            </el-form-item>
        </el-form>
    </el-dialog>


    <el-dialog
            title="请填写分数（只能填数字）"
            :visible.sync="dialogVisible2"
            width="30%"
    >
        <span><el-input v-model="scoreInfo.score"></el-input></span>
        <span slot="footer" class="dialog-footer">
            <el-button @click="dialogVisible2 = false">取 消</el-button>
            <el-button type="primary" @click="submitScore()">确 定</el-button>
        </span>
    </el-dialog>
    <!--        分割线-->
    <el-divider content-position="left">{{ homeworkInfo.homework_name }}</el-divider>
    <el-table
            :data="studentHWs"
            style="width: 100%"
            :row-class-name="tableRowClassName">
        <el-table-column
                prop="homework_name"
                label="作业名字"
                width="300">
        </el-table-column>
        <el-table-column
                prop="student_name"
                label="学生姓名"
                width="300">
        </el-table-column>
        <el-table-column
                prop="score"
                label="成绩"
                width="300">
        </el-table-column>
        <el-table-column label="操作">
            <template slot-scope="scope">
                <el-button
                        size="mini"
                        @click="download(scope.$index, scope.row)">下载
                </el-button>
                <el-button
                        type="primary"
                        size="mini"
                        @click="score(scope.row)">评分
                </el-button>
            </template>
        </el-table-column>

    </el-table>

</div>

<script>
    new Vue({
        el: "#app",
        created() {
            // window.location.href 属性返回当前页面的 URL。
            let url = decodeURI(window.location.href); // 对获取url的url进行解码   decodeURI()函数可对encodeURI()函数编码过的 URI 进行解码。
            let urlParsm = url.split("?obj=");  // 获取url携带的参数
            this.homeworkInfo = urlParsm ? JSON.parse(urlParsm[1]) : ''; //判断参数是否存在 存在的话对对参数进行转换
            this.getStudentHWs();
        },
        data() {
            return {
                //接收传参信息
                homeworkInfo: {},
                homework: {},
                //获取课程的作业信息
                studentHWs: [],
                studentHWs_num: 0,

                //图片
                currentDate: new Date(),

                //复选框选中数据集合
                multipleSelection: [],
                //条件搜索表单
                team: {
                    teamArea: "",
                    stu1Name: "",
                    teamName: "",
                    stu1Phone: "",
                },
                //上传的成绩数据
                scoreInfo: {},
                //数据框表单隐藏选项
                dialogVisible: false,
                dialogVisible2: false,
                //分页
                currentPage: 1,
            };
        },
        methods: {
            //页头返回
            goBack() {
                window.location.replace(document.referrer);
            },
            //添加课程数据，绑定对话框
            addHomework() {
                _this = this
                //发送请求数据
                axios({
                    method: "post",
                    url: "/addHomework",
                    data: this.homework,
                }).then(function (resp) {
                    console.log(resp.data.status)
                    if (resp.data.status === 200) {
                        //添加失败
                        _this.$message({
                            message: "布置成功",
                            type: "success",
                        });
                        //关闭对话框
                        _this.dialogVisible = false;
                        location.reload();
                    } else {
                        _this.$message({
                            message: '布置作业失败',
                            type: 'error'
                        });
                        //关闭对话框
                        _this.dialogVisible = false;
                    }
                });
            },

            //获取学生的作业
            getStudentHWs() {
                _this = this
                //发送请求数据
                axios({
                    method: "post",
                    url: "/selectStudentHW",
                    data: this.homeworkInfo,
                }).then(function (resp) {
                    if (resp.data.status === 200) {
                        _this.studentHWs = resp.data.studentHWs;
                        _this.studentHWs_num = resp.data.studentHWs_num;
                    } else {
                        _this.$message({
                            message: '获取数据失败',
                            type: 'error'
                        });
                    }
                });
            },
            //评分
            score(row) {
                this.dialogVisible2 = true;
                this.scoreInfo.homework_id=row.homework_id;
                this.scoreInfo.student_id=row.student_id;
            },
            //上传评分
            submitScore(){
                _this = this
                //发送请求数据
                axios({
                    method: "post",
                    url: "/submitScore",
                    data: this.scoreInfo,
                }).then(function (resp) {
                    if (resp.data.status === 200) {
                        _this.$message({
                            message: '评分成功',
                            type: 'success'
                        });
                        window.location.reload()
                    } else {
                        _this.$message({
                            message: '评分失败',
                            type: 'error'
                        });
                    }
                });
                this.dialogVisible2 = false
            },
            test() {
                console.log('studentHWs', this.studentHWs);
            },

            //表格中的复选框颜色设置
            tableRowClassName({row, rowIndex}) {
                if (rowIndex === 1) {
                    return "warning-row";
                } else if (rowIndex === 3) {
                    return "success-row";
                }
                return "";
            },
            //复选框选中后执行的方法
            handleSelectionChange(val) {
                this.multipleSelection = val;
                console.log(this.multipleSelection);
            },
            //搜索条件表单,调用查询方法
            onSubmit() {
                console.log(this.team);
            },

            download(index, row) {
                console.log(row);
                window.location.href = '/file/' + row.homework_name;
            }
        },
    });
</script>

<style>

    .el-table .warning-row {
        background: oldlace;
    }

    .el-table .success-row {
        background: #f0f9eb;
    }

    .time {
        font-size: 13px;
        color: #999;
    }

    .bottom {
        margin-top: 13px;
        line-height: 12px;
    }

    .button {
        padding: 0;
        float: right;
    }

    .image {
        width: 100%;
        display: block;
    }


</style>


</body>
</html>
